<template>
    <div id="comment-manage">
      <!--搜索-->
      <!-- <div class="top">
        <el-col :span="12">
          <el-input placeholder="请输入内容" v-model="input" class="input-with-select" style="width: 100%">
            <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="2" :offset="1">
        </el-col>
      </div> -->
      <!--表格-->
      <div class="comment-table">
        <el-table
          border
          :data="tableData"
          style="width: 90%">
          <el-table-column
            label="seatID"
            align="center"
            width="100"
            prop="id">
          </el-table-column>
           <el-table-column
            label="电影厅"
            align="center"
            width="120"
            show-overflow-tooltip>
            {{this.hallInfo.hallName}}
          </el-table-column>
          <el-table-column
            label="座位"
            align="center"
            width="120"
            show-overflow-tooltip>
             <template slot-scope="scope">
              {{scope.row.seatRow}}排{{scope.row.seatColumn}}座
            </template>
            
          </el-table-column>
          <el-table-column
            label="行"
            width="120"
            align="center"
            show-overflow-tooltip
            prop="seatRow">
          </el-table-column>
          <el-table-column
            label="列"
            width="120"
            align="center"
            show-overflow-tooltip
            prop="seatColumn">
          </el-table-column>
        
     
          <el-table-column 
          align="center"
          label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status != 0 "
                size="mini"
                @click="handleEdit(scope.$index, scope.row,0)">启用座位</el-button>
                <el-button
                v-if="scope.row.status == 0 "
                size="mini"
                @click="handleEdit(scope.$index, scope.row,1)">禁用座位</el-button>

              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <div class="block" v-if="tableData.length">
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
    import {MessageBox,Message} from 'element-ui'
    import {getSeatInfo,getCurHallInfo,updateSeatInfo,deleteSeatInfo} from '../../../api/index'
    import moment from 'moment'
    export default {
        name: "CommentManage",
        data() {
          return {
            tableData:[],
            hallInfo:{},
            pageSize: 10,
            total:0,
            currentPage:1,
            dialogFormVisible:false,
            dialogTitle:'',
            labelPosition:'left',
            input:'',
            searchInput:'',
          }
        },
        created(){
          this.loadCurrentHallInfo();
          this.loadCurrentPageComment(this.currentPage,this.pageSize);
        },
        methods: {
          async loadCurrentHallInfo(){
             let json = await getCurHallInfo(this.$route.query.hallId);
            if (json.code===0){
              this.hallInfo.hallName = json.data.hallName;
              this.total = json.data.maxColumn * json.data.maxRow;
            }
          },
          async loadCurrentPageComment(currentPage,pageSize){
            
            //console.log(this.$route.query.hallId);
            let json = await getSeatInfo(currentPage,pageSize,this.$route.query.hallId);
            if (json.code===0){
              this.tableData = json.data;
             
            }
          },
          async currentChange(currentPage){
            this.currentPage = currentPage;
            this.loadCurrentPageComment(this.currentPage,this.pageSize,this.$route.query.hallId);
          },
            async handleEdit(index, row,status) {

              MessageBox.confirm('是否修改此座位状态？','提示').then(async (value)=>{   
              if (value==='confirm'){
                let json = await updateSeatInfo(row.id,status);
                if (json.code===0){
                  this.loadCurrentPageComment(this.currentPage,this.pageSize,this.$route.query.hallId);
                  Message.success('修改成功！');
                }else{
                  Message.error("修改失败");
                }
              }
            });
            
            
          },
          async handleDelete(index, row) {
           // console.log(index, row);
            MessageBox.confirm('此操作将删除此座位？','提示').then(async (value)=>{
              if (value==='confirm'){deleteSeatInfo
                let json = await deleteSeatInfo(row.id);
                if (json.code===0){
                  this.loadCurrentPageComment(this.currentPage,this.pageSize,this.$route.query.hallId);
                  Message.success('删除成功！');
                }else{
                  Message.error("删除失败");
                }
              }
            });
          }
        },
    }
</script>


<style>
  .comment-table{
    width:90%;
    min-width:900px;
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .top{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    margin-bottom: 30px;
  }
  .block{
    text-align: center;
  }
  .el-dialog__header{
    text-align: center;
  }
  .el-dialog__body .el-form-item{
    padding-left: 20%;
  }
</style>
